<template>
  <div class="allnotes">
    <div class="writenotes">
      <div class="travelInfo">
        <div style="height: 20px"></div>
        <div class="travelInfo1">
          <div
            style="
              margin-left: 30px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
              font-size: 17px;
            "
          >
            游记标题：
          </div>
          <div style="width: 230px; font-weight: 650; color: #737b82">
            <div style="margin-top: 10px">{{ lgtravelnotes.notesTitle }}</div>
          </div>
          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
              font-size: 17px;
            "
          >
            游行类型：
          </div>
          <div style="width: 230px; font-weight: 650; color: #737b82">
            <div style="margin-top: 10px">
              {{ lgtravelnotes.passScenicspot }}
            </div>
          </div>

          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
              font-size: 17px;
            "
          >
            旅行花费：
          </div>
          <div style="width: 230px; font-weight: 650; color: #737b82">
            <div style="margin-top: 10px">
              {{ lgtravelnotes.travelCost }}
            </div>
          </div>
        </div>
        <div class="travelInfo2">
          <div
            style="
              margin-left: 30px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
              font-size: 17px;
            "
          >
            旅行日期：
          </div>
          <div style="width: 230px; font-weight: 650; color: #737b82">
            <div style="margin-top: 10px">
              {{ lgtravelnotes.travelDate }}
            </div>
          </div>

          <div
            style="
              margin-left: 65px;
              margin-top: 10px;
              color: rgb(64, 158, 255);
              font-weight: 700;
              font-size: 17px;
            "
          >
            旅行时长：
          </div>
          <div style="width: 230px; font-weight: 650; color: #737b82">
            <div style="margin-top: 10px">
              {{ lgtravelnotes.travelTime }}
            </div>
          </div>
        </div>
        <div style="height: 20px"></div>
      </div>

      <div class="notes_container">
        <!-- 从数据库读取展示 -->
        <ul class="infinite-list" style="overflow: auto">
          <div v-html="lgtravelnotes.notesUrl" class="ql-editor">
            {{ lgtravelnotes.notesUrl }}
          </div>
        </ul>
      </div>
      <div class="publishTravelNote">
        <el-row>
          <el-button
            :type="isparise ? 'success' : 'info'"
            round
            @click="parise()"
            >点赞</el-button
          >
          <el-button
            :type="iscollection ? 'warning' : 'info'"
            round
            @click="collection()"
            >收藏</el-button
          >
          
        </el-row>
      </div>
      <div class="scomment">
        <tcomment :uid = "lgtravelnotes.createdBy" :pid = "lgtravelnotes.notesId"></tcomment>
      </div>
      
    </div>
  </div>
</template>
<script>
import { findTravelNotesById } from "@/api/travelnotes";
import tcomment from '@/views/comment/travelcomment/index.vue'

export default {
  components:{
    tcomment,
  },
  data() {
    return {
      iscollection: 0,
      isparise: 0,
      imgUrl: "",
      input: "",
      str: "",
      lgtravelnotes: {
        notesId: "",
        notesUrl: "",
        notesTitle: "",
        passScenicspot: "",
        travelCost: "",
        travelDate: "",
        travelTime: "",
        createdBy: this.$store.getters.userId,
      },
    };
  },
  created() {
    this.lgtravelnotes.notesId = this.$route.query.item.notesId;
    findTravelNotesById(this.lgtravelnotes).then((res) => {
      console.log(res);
      if (res.data.notesUrl !== "") {
        this.lgtravelnotes.notesUrl = res.data.notesUrl;
      } else {
        this.lgtravelnotes.notesUrl = "未填写";
      }
      if (res.data.notesTitle !== "") {
        this.lgtravelnotes.notesTitle = res.data.notesTitle;
      } else {
        this.lgtravelnotes.notesTitle = "未填写";
      }
      if (res.data.passScenicspot !== "") {
        this.lgtravelnotes.passScenicspot = res.data.passScenicspot;
      } else {
        this.lgtravelnotes.passScenicspot = "未填写";
      }
      if (res.data.travelCost !== "") {
        this.lgtravelnotes.travelCost = res.data.travelCost + "元";
      } else {
        this.lgtravelnotes.travelCost = "未填写";
      }
      if (res.data.travelDate !== "") {
        this.lgtravelnotes.travelDate = res.data.travelDate.split("T")[0];
      } else {
        this.lgtravelnotes.travelDate = "未填写";
      }
      if (res.data.travelTime !== "") {
        this.lgtravelnotes.travelTime = res.data.travelTime + "日";
      } else {
        this.lgtravelnotes.travelTime = "未填写";
      }
    });
  },
  methods: {
    parise() {
      this.isparise = this.isparise == 0 ? 1 : 0;
    },
    collection() {
      this.iscollection = this.iscollection == 0 ? 1 : 0;
    },
  },
};
</script>

<style scoped>
.ql-editor {
  height: 500px;
}
.writenotes {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 80%;
}
.travelInfo {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.notes_container {
  margin-top: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: rgb(241, 243, 244);
}
.allnotes {
  display: flex;
  justify-content: center;
}
.publishTravelNote {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.travelInfo1 {
  display: flex;
  margin-left: 100px;
}
.travelInfo2 {
  display: flex;
  margin-top: 5px;
  margin-left: 100px;
}
.scomment {
  margin-left:100px;
  width: 80%
}
</style>
